<template>
  <div>
    <div class="register_con">
      <div class="l_con fl">
        <a class="reg_logo"><img src="../assets/images/logo.png" /></a>
        <div class="reg_slogan">商品美 · 种类多 · 欢迎光临</div>
        <div class="reg_banner"></div>
      </div>

      <div class="r_con fr">
        <div class="reg_title clearfix">
          <h1>用户注册</h1>
          <a href="/login.html">登录</a>
        </div>
        <div class="reg_form clearfix" id="app" v-cloak>
          <form @submit.prevent="on_submit">
            <ul>
              <li>
                <label>用户名:</label>
                <input
                  type="text"
                  v-model="username"
                  @blur="check_username"
                  name="user_name"
                  id="user_name"
                />
                <span>{{user_unique}}</span>
                <span v-show="error_name" class="error_tip">请输入5-20个字符的用户</span>
              </li>
              <li>
                <label>密码:</label>
                <input
                  type="password"
                  v-model="password"
                  @blur="check_pwd"
                  name="pwd"
                  id="pwd"
                />
                <span v-show="error_password" class="error_tip"
                  >密码最少8位，最长20位</span
                >
              </li>
              <li>
                <label>确认密码:</label>
                <input
                  type="password"
                  v-model="password2"
                  @blur="check_cpwd"
                  name="cpwd"
                  id="cpwd"
                />
                <span v-show="error_check_password" class="error_tip"
                  >两次输入的密码不一致</span
                >
              </li>
              <li>
                <label>手机号:</label>
                <input
                  type="text"
                  name="phone"
                  v-model="mobile"
                  @blur="check_phone"
                  id="phone"
                />
                <span v-show="error_phone" class="error_tip"
                  >您输入的手机号格式不正确</span
                >
              </li>
               <li>
                <label>图片验证码:</label>
                <input
                  type="text"
                  name="image_code"
                  v-model="image_code"
                  class="msg_input"
                  id="phone"
                />
                <img
                  href="javascript:;"
                  @click="update_img_code"
                  class="get_msg_code"
                  :src="'http://127.0.0.1:8000/user/img_code?uuid='+my_uuid"
                  >
                <span v-show="error_phone" class="error_tip"
                  >您输入的手机号格式不正确</span
                >
              </li>
              <li>
                <label>短信验证码:</label>
                <input
                  type="text"
                  v-model="sms_code"
                  @blur="check_sms_code"
                  name="msg_code"
                  id="msg_code"
                  class="msg_input"
                />
                <a
                  href="javascript:;"
                  @click="send_sms_code"
                  class="get_msg_code"
                  >{{ sms_code_tip }}</a
                >
                <span v-show="error_sms_code" class="error_tip">{{
                  sms_code_error_tip
                }}</span>
              </li>
              <li class="agreement">
                <input
                  type="checkbox"
                  v-model="allow"
                  name="allow"
                  id="allow"
                  checked="checked"
                />
                <label>同意”美多商城用户使用协议“</label>
                <span v-show="error_allow" class="error_tip2">请勾选同意</span>
              </li>
              <li class="reg_sub">
                <input type="button" value="注 册" name="" @click="register"/>
              </li>
            </ul>
          </form>
        </div>
      </div>
    </div>

    <div class="footer no-mp">
      <div class="foot_link">
        <a href="#">关于我们</a>
        <span>|</span>
        <a href="#">联系我们</a>
        <span>|</span>
        <a href="#">招聘人才</a>
        <span>|</span>
        <a href="#">友情链接</a>
      </div>
      <p>CopyRight © 2016 北京美多商业股份有限公司 All Rights Reserved</p>
      <p>电话：010-****888 京ICP备*******8号</p>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import {uuid} from  'vue-uuid'

export default {
  data() {
    return {
      username: "日月山河",
      password: "12345678",
      password2: "12345678",
      mobile: "17611435013",
      sms_code: "",
      allow: false,
      user_unique:"",

      error_name: false,
      error_password: false,
      error_check_password: false,
      error_phone: false,
      error_sms_code: false,
      error_allow: false,

      sms_code_error_tip: "",
      sms_code_tip: "发送验证码",

      image_code:"",
      my_uuid:uuid.v1()

    };
  },
  methods: {

    update_img_code(){
      //刷新 更新
      this.my_uuid=uuid.v1()
    },
    
    check_username() {

        this.user_unique=""

         //进行 用户名正则验证
         if(/.{5,20}/.test(this.username)){
             this.error_name=false
         }else{
             this.error_name=true
             return 
         }
         


        //进行 用户名唯一性验证
        axios.post("/api/user/checkuser",{"username":this.username}).then(resp=>{
            console.log(resp.data)
            // if(resp.data.code==200){
            //     this.user_unique="√"
            // }else{
            //     this.user_unique="X"
            // }
            this.user_unique=resp.data.msg
        }).catch(error=>{
            console.log(error)
        })
       

    },
    check_pwd() {
        if(/.{8,20}/.test(this.password)){
            this.error_password=false
        }else{
            this.error_password=true
        }
    },
    check_cpwd() {
        if(this.password==this.password2){
            this.error_check_password=false
        }else{
            this.error_check_password=true
        }
    },
    check_phone() {
        if(/1[3578]\d{9}/.test(this.mobile)){
            this.error_phone=false
        }else{
            this.error_phone=true
        }
    },
    check_sms_code() {
        if(this.sms_code==null || this.sms_code==""){
            this.error_sms_code=true
            this.sms_code_error_tip="请输入验证码"
        }else{
            this.error_sms_code=false
            this.sms_code_error_tip=""
        }
    },
    send_sms_code() {
        this.sms_code_tip="发送中..."

        axios.get("/api/user/sms_code",{'params':{'phone':this.mobile}}).then(resp=>{
        
        console.log(resp.data)
        this.sms_code_tip="已发送"
      }).catch(error=>{
        console.log(error)
        this.sms_code_tip="重新发送"
      })

    },
    register(){
      //注册
      axios.post("/api/user/register",{
        "username":this.username,
        "password":this.password,
        "phone":this.mobile,
        "sms_code":this.sms_code,
        "img_code":this.image_code,
        "uuid":this.my_uuid,

      }).then(resp=>{
        console.log(resp.data)
      }).catch(error=>{
        console.log(error)
      })
    }
  },
};
</script>

<style>
</style>